<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="shortcut icon" href="/favicon.ico">
<meta name="viewport"
	content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
<link rel="stylesheet" href="/common/css/monitor/index_server.css" type="text/css"/>
    <link href="/css/style.min.css?v=4.0.0" rel="stylesheet">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
</head>
<style type="text/css">
table{
	table-layout: fixed;
}
.hidell{
 	white-space:nowrap;
 	overflow:hidden;
 	text-overflow:ellipsis;
 }</style>
<body style="background-color: #fff;">
	<div>
	<div id="server_list" >
		   <div id="project_name"></div>
		   <!-- 服务器信息Start -->
		   <div id="serverContent"></div>
		    <!-- 服务器信息End -->
		   
		   <!-- 阿里云Start -->
		   
	  </div> 
	</div>
		<!-- End Panel Other -->
	<script src="/js/jquery.min.js?v=2.1.4"></script>
	<script src="/js/bootstrap.min.js?v=3.3.5"></script>
	<script src="/js/content.min.js?v=1.0.0"></script>
	<script src="/common/petecat.js"></script>
	<script src="/common/form.js"></script>
	<!-- HTML之间的传值 -->
	<script src="/js/jquery.params.js"></script>
	<script src="/js/plugins/layer-pc/layer.js"></script>
	<script src="/js/jquery.cookie.js"></script>
    <!-- 组件通用 -->
    <script src="/common/frame.js"></script>
    <script type="text/javascript">
	    var proToken = GetQueryString("proToken");
	    var titleName = GetQueryString("titleName");
	    var projectId = GetQueryString("projectId");
    	$(function(){
    		//设置标题
    		$("#project_name").val(titleName);
    		//初始化服务器数据
    		initServerInfo();
    		$("#server_list").on("click",".server_info",function(){
    			var title = $(this).parent().find("lable").text();
	    		serverIndex = layer.open({
					type:2,
					title:title,
					shade: 0.8,
	                content: ['/monitor/index_server_info.html?serverMac='+$(this).parent().find('.serverMac').val()+'&proToken='+proToken+'&projectId='+projectId, 'auto'], 
	                end: function(){ //此处用于演示
	                },
	                success:function(index,layer){
	                }
				});
	    	//全屏详情
	    	layer.full(serverIndex);
    		});
    		//点击查看服务器历史
    		$("#server_list").on("click",".history",function(){
    			var title = $(this).parent().find("lable").text();
    			var mac = $(this).parent().parent().find('.serverMac').val();
	    		serverIndex = layer.open({
					type:2,
					title:title+"服务器的历史信息",
					shade: 0.8,
	                content: ['/monitor/server_history.html?serverMac='+mac,'auto']
				});
	    	//全屏展示历史
	    	layer.full(serverIndex);
    		});
    	});
    	
    	
    	//初始化服务器
		function initServerInfo(){
			//加载服务器数据
			var req = {};
        	req['reqJSON'] = {
    			type : 'get',
    			url : BASE_URL+'/base/project/queryServerInfo?token='+proToken
        	};
        	req['successFn'] = function(respData){
        		if(respData.data.length>0){
        			$.each(respData.data,function(index,item){
            			//拼接字符串
            			appendServer(item,index);
            		});
        		}else{
        			$("#serverContent").html("<h1>当前项目没有正在服务器！</h1>");
        		}
        	};
        	ajaxRequest(req);
		}
		
		//拼接图表
		function appendServer(item,index){
			var htmlA = appendDisk(item['diskList']);
			var flag = "";
			if(item.status == 1){
				statusText = "<span style='color:#00FF00'>正在运行</span>";
				flag = true;
			}else{
				statusText = "<span style='color:red'>服务器监控已停止</span>";
				flag = false;
			}
			memTotal = bytesToSize(item['memTotal']);
			memTotal = changeTwoDecimal_f(memTotal);
			var html = '<div class="server">'+
			'				<div class="server_name" >'+
			'					<lable>'+item.hostname+'</lable><span class="history">历史启动信息</span>'+
			'				</div>'+
			'			<input type="hidden" class="serverMac" value='+item['mac']+'>'+
			'				<div class="server_info">'+
			'					<table class="table_info" >'+
			'						<tr title="'+item['platform']+'">'+
			'							<td>系统版本：</td><td class="hidell">'+item['platform']+'</td>'+
			'						</tr>'+
			'						<tr>'+
			'							<td>服务器状态：</td><td>'+statusText+'</td>'+
			'						</tr>'
			+'						<tr>'+
			'							<td>总运行时长：</td><td>'+item.runTime+'</td>'+
			'						</tr>'			
									+'<tr title="'+item['platform']+'">'+
			'							<td>内存大小：</td><td>'+memTotal+'GB</td>'+
			'						</tr>'+
			'						<tr>'+
			'							<td>CPU：</td>'+
			'						</tr>'+
			'						<tr>'+
			'							<td style="padding-left:60px;">物理数：</td><td>'+item['cpuLogicalCount']+'个</td>'+
			'						</tr>'+
			'						<tr>'+
			'							<td style="padding-left:60px;">总数：</td><td>'+item['cpuTotalCount']+'个</td>'+
			'						</tr>'+
			'						<tr>'+
			'							<td>磁盘数量：</td><td>'+item['diskCount']+'个</td>'+
			'						</tr>'+
									htmlA+
			'					</table>'+
			'				</div>	'+
			'		    </div>';
			$("#serverContent").append(html);
		}
		
		//拼接磁盘信息
		function appendDisk(diskList){
			var html = "";
			for(var i = 0;i<diskList.length;i++){
				total = bytesToSize(diskList[i]['total']);
				total = changeTwoDecimal_f(total);
			    html +='<tr>'+
					  '<td style="padding-left:60px;">'+diskList[i]['device']+'</td><td >'+diskList[i]['fstype']+'<span style="padding-left:10px;    display: inline-block;">'+total+' GB</span></td>'+
					  '</tr>';
			}
			return html;
		}
		function bytesToSize(bytes) {  
		       if (bytes === 0) return '0 B';  
		        var k = 1024;  
		        sizes = ['B','KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];  
		        i = Math.floor(Math.log(bytes) / Math.log(k));  
		    return (bytes / Math.pow(k, i));   
		}  
		function changeTwoDecimal_f(x)
		{
		var f_x = parseFloat(x);
		if (isNaN(f_x))
		{
		return false;
		}
		f_x = Math.round(f_x*100)/100;
		var s_x = f_x.toString();
		var pos_decimal = s_x.indexOf('.');
		if (pos_decimal < 0)
		{
		pos_decimal = s_x.length;
		s_x += '.';
		}
		while (s_x.length <= pos_decimal + 2)
		{
		s_x += '0';
		}
		return s_x;
		}
    </script>
    
</body>
</html>